<!DOCTYPE html>
<html>
<head>
<base href="${basePath}">
<meta charset="UTF-8">
$!{include("import_js_css.html")}
<title>修改班级</title>
<link rel="stylesheet" type="text/css" href="${viewPath}/resources/css/class.css" >
<style type="text/css">
tr th{
	text-align: center;
	vertical-align: middle;
}

tr td{
	text-align: center;
	vertical-align: middle;
}
</style>
<script type="text/javascript">
var currentTooltip;//当前弹出的气泡对话框
var currentTooltipSchedule;//当前弹出对话框的课程节点
function documentReady(){
	//鼠标滑过，弹出气泡对话框
	$(document).on("mouseover", ".scheduleShowInfo a", function(){
		currentTooltipSchedule = $(this).parents(".scheduleAllInfo");
		
		var content = $(".scheduleHiddenInfo", $(this).parent().parent()).html();
		if(currentTooltip){
			currentTooltip.close();
		}
		currentTooltip = tooltip($(this).get(0), content);
	});
}
$(function(){
	
	//去掉下拉输入框
	$("#inputClassType").select2({
		width: "100%",
		minimumResultsForSearch: -1
	});
	
	$("#inputClassState").select2({
		width: "100%",
		minimumResultsForSearch: -1
	});
	
	$("#inputClassType").select2("val", "${type}");
	$("#inputClassState").select2("val", "${state}");
	$("#inputProduct").select2("val", "${productId}");
	$("#inputOfficerId").select2("val", "${officerId}");
	
	
	$("#cheduleStartDatetime").datetimepicker({
		language: "zh-CN",
		pickDate: false,
		useStrict: true
	});
	
	$("#cheduleEndDatetime").datetimepicker({
		language: "zh-CN",
		pickDate: false,
		useStrict: true
	});
	
	//填入一周课程数据
	<!-- #for(List<ScheduleEntity> weekList : schedules) -->		
	var week = "${for.index}";
		<!-- #for(ScheduleEntity schedule : weekList) -->
		var scheduleItem = "<div class='scheduleShowInfo' style='height:30px;'><a><span class='saveStartDatetime'>${schedule.startTime}</span> ~ <span class='saveEndDatetime'>${schedule.endTime}</span></a></div>";
		scheduleItem += "<div class='scheduleHiddenInfo'  style='display:none;'><input type='hidden' class='saveScheduleId' value='${schedule.id}'/><div style='width:240px;margin-bottom:5px;' data='${schedule.scheduleName}' class='saveScheduleName'>课程：${schedule.scheduleName}</div><div style='margin-bottom:5px;' data='${schedule.mainTeacherId}' class='saveMainTeacher'>老师：${schedule.mainTeacherName}</div><div style='margin-bottom:5px;' data='${schedule.assistantId}' class='saveAssistant'>助教：${schedule.assistantName}</div><div style='margin-bottom:5px;' data='${schedule.placeId}' class='savePlace'>场地：${schedule.placeName}</div><div data='${schedule.seatNumber}' class='saveSeatNumber'>席位数：${schedule.seatNumber}</div><div class='scheduleDelete' style='float:right;cursor:pointer;'><a id='${schedule.id}'>删除本课程</a></div></div>";
		$("td[data="+(parseInt(week)+1)+"]").append("<div class='scheduleAllInfo'>"+scheduleItem+"</div>");
		<!-- #end -->
	<!-- #end -->
	
	//删除一门课程
	$(document).on("click", ".scheduleDelete", function(){
		if(currentTooltip){
			currentTooltip.close();
		}
		var id = $(this).find("a").attr("id");
		var url = "${basePath}/yueyogaAdmin/ajaxDeleteScheduleByScheduleId.jhtml";
		$.post(url,{scheduleId:id},function(resp){
			var data = eval("("+resp+")");
			if(data.success){
				currentTooltipSchedule.remove();
			}else{
				error(data.msg);
			}
		});
	});
	
	//重置所有课程
	$("#scheduleReset").click(function(){
		$(".scheduleAllInfo").remove();
	});
	
	//点击添加按钮设置课时
	$(".schedule-add").click(function(){
		//id即为星期几，从1到7
		var week = $(this).attr("data");
		
		//获得课程起始时间
		var startDatetime = $(":input[name=cheduleStartDatetime]").val();
		//获得课程结束时间
		var endDatetime = $(":input[name=cheduleEndDatetime]").val();
		
		//获得老师
		var coachId = $(":input[name=cheduleCoach]").val();
		var coachName = $(":input[name=cheduleCoach] option:selected").text();
		//获得助教
		var coachHelpId = $(":input[name=cheduleCoachHelp]").val();
		var coachHelpName = $(":input[name=cheduleCoachHelp] option:selected").text();
		//获得场地
		var placementId = $(":input[name=chedulePlacement]").val();
		var placementName = $(":input[name=chedulePlacement] option:selected").text();
		
		//--获得课程名称
		var scheduleName = $(":input[name=scheduleName]").val();
		//--获得席位数
		var seatNumber = $(":input[name=seatNumber]").val();
		
		//判断数据不可为空
		if(startDatetime.length <= 0){
			alert("请选择课程起始时间");
		}
		if(endDatetime.length <= 0){
			alert("请选择课程结束时间");
		}
		if(coachId == ""){
			alert("请选择老师");
		}
		if(coachHelpId == ""){
			alert("请选择助教");
		}
		if(placementId == ""){
			alert("请选择场地");
		}
		
		if($.trim(scheduleName) == ""){
			alert("请输入课程名称");
			return;
		}
		if(isNaN(seatNumber)){
			alert("请输入规范席位数!");
			return;
		}
		
		if($.trim(seatNumber)==''){
			alert("席位数不能为空!");
			return;
		}
		/* var scheduleItem = "<div class='scheduleShowInfo' style='height:30px;'><a><span class='saveStartDatetime'>"+startDatetime+"</span> ~ <span class='saveEndDatetime'>"+endDatetime+"</span></a></div>";
		scheduleItem += "<div class='scheduleHiddenInfo' style='display:none;'><div style='width:240px;margin-bottom:5px;' data='"+coachId+"' class='saveMainTeacher'>老师："+coachName+"</div><div style='margin-bottom:5px;' data='"+coachHelpId+"' class='saveAssistant'>助教："+coachHelpName+"</div><div data='"+placementId+"' class='savePlace'>场地："+placementName+"</div><div class='scheduleDelete' style='float:right;cursor:pointer;'><a>删除本课程</a></div></div>";
		$("td[data="+week+"]").append("<div class='scheduleAllInfo'>"+scheduleItem+"</div>");
		 */
		//--
		var scheduleItem = "<div class='scheduleShowInfo' style='height:30px;'><a><span class='saveStartDatetime'>"+startDatetime+"</span> ~ <span class='saveEndDatetime'>"+endDatetime+"</span></a></div>";
		scheduleItem += "<div class='scheduleHiddenInfo' style='display:none;'><input type='hidden' class='saveScheduleId' value='0'/><div style='width:240px;margin-bottom:5px;' data='"+scheduleName+"' class='saveScheduleName'>课程："+scheduleName+"</div><div style='margin-bottom:5px;' data='"+coachId+"' class='saveMainTeacher'>老师："+coachName+"</div><div style='margin-bottom:5px;' data='"+coachHelpId+"' class='saveAssistant'>助教："+coachHelpName+"</div><div style='margin-bottom:5px;' data='"+placementId+"' class='savePlace'>场地："+placementName+"</div><div data='"+seatNumber+"' class='saveSeatNumber'>席位数："+seatNumber+"</div><div class='scheduleDelete' style='float:right;cursor:pointer;'><a>删除本课程</a></div></div>";
		$("td[data="+week+"]").append("<div class='scheduleAllInfo'>"+scheduleItem+"</div>");
	});
	
	//提交课程表单数据，进行修改
	$("#addButton").click(function(){
		//获得参数
		var classId = $("#inputClassId").val();
		var className = $("#inputClassName").val();
		var classType = $("#inputClassType").val();
		var classState = $("#inputClassState").val();
		var classProductId = $("#inputProduct").val();
		var classAssignedTo = $("#inputOfficerId").val();
		var classRemarks = $("#inputRemarks").val();
		
		if(className == ""){
			alert("班级名称不可为空");
			return;
		} 
		
		//组装schedule对象
		var schedule = [];
		$(".scheduleAllInfo").each(function(index,item){
			var startTime = $(".saveStartDatetime",$(this)).text();
			var endTime = $(".saveEndDatetime",$(this)).text();
			var mainTeacherId = $(".saveMainTeacher",$(this)).attr("data");
			var assistantId = $(".saveAssistant",$(this)).attr("data");
			var placeId = $(".savePlace",$(this)).attr("data");
			var week = $(this).parent().attr("data");
			var seatNumber = $(".saveSeatNumber",$(this)).attr("data");
			var scheduleName = $(".saveScheduleName",$(this)).attr("data");
			var scheduleId = $(".saveScheduleId",$(this)).val();
			
			var scheduleItem = "{'id':'"+scheduleId+"','scheduleName':'"+scheduleName+"','seatNumber':'"+seatNumber+"','startTime':'"+startTime+"','endTime':'"+endTime+"','mainTeacherId':'"+mainTeacherId+"','assistantId':'"+assistantId+"','placeId':'"+placeId+"','week':'"+week+"'}";
			schedule.push(scheduleItem);
		});
		
		var url = "yueyogaAdmin/updateClass.jhtml";
		$.post(url, {
			"id":classId,
			"name":className,
			"type":classType,
			"state":classState,
			"productId":classProductId,
			"assignedTo":classAssignedTo,
			"remarks":classRemarks,
			"schedule":schedule
		}, function(res) {
			var json = eval("("+res+")");
			if(json.success) {
				var d = alert(json.msg);
				setTimeout(function(){
					d.close().remove();
					window.location.href = "yueyogaAdmin/viewClass.jhtml?classId="+classId;
				}, 1000);
			} else {
				error(json.msg);
			}
		});
	});	
});

</script>
</head>
<body>
	$!{include("header.html")}
	<div class="menu_all">
		<div class="div_search_result clear">
			<div class="panel-heading search-result-title" style="background: #E9E9E9;">
				<h3 class="panel-title">修改班级</h3>
			</div>
			<div class="panel-form-add">
				<form class="form-horizontal" onsubmit="return false;" action="#" method="post" >
					<input type="hidden" id="inputClassId" value="${classId}" />
					<div class="panel-form-layout">
						<label for="inputClassName" class="col-sm-1 control-label">名称</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="name" id="inputClassName" value="${name}">
						</div>
						
						<label for="inputClassType" class="col-sm-1 control-label">类型</label>
						<div class="col-sm-3">
							<select id="inputClassType" class="selectpicker show-tick" data-width="100%" name="classType">								
								<option value="不定会员">不定会员</option>
								<option value="固定会员">固定会员</option>
							</select>
						</div>
					
						<br /> <br />
						<label for="inputClassState" class="col-sm-1 control-label">状态</label>
						<div class="col-sm-3">
							<select id="inputClassState" class="selectpicker show-tick" data-width="100%" name="state">
								<!-- #for(Status st : classStatusList) -->
								<option value="${st.id}">${st.name}</option>
								<!-- #end -->
							</select>
						</div>
						
						<label for="inputOfficerId" class="col-sm-1 control-label">负责人</label>
						<div class="col-sm-3">
							<select id="inputOfficerId" data-live-search="true" class="selectpicker show-tick" data-width="100%" name="officerId">								
								<option value="">请选择负责人...</option>
								<!-- #for(GroupUserModel um : officerList) -->
									<option value="${um.id}">${um.name}</option>
								<!-- #end -->
							</select>
						</div>
						<br /> <br />
						
						<label for="inputRemarks" class="col-sm-1 control-label">备注</label>
						<div class="col-sm-9" style="margin-bottom:20px;">
							<textarea id="inputRemarks" class="form-control"  style="width:665px;height:48px; resize: none;" name="remarks">${remarks}</textarea>
						</div>
					</div>
					<div class="form-group" style="padding:0 15px;">
						<!-- 设置课程start -->
						<div style="margin:0 auto;clear:both;">
							<table class="table class-table-add">
								<tr style="text-align:center;">
									<td class="no-left-border class-td-head"><div>星期一</div></td>
									<td class="class-td-head"><div>星期二</div></td>
									<td class="class-td-head"><div>星期三</div></td>
									<td class="class-td-head"><div>星期四</div></td>
									<td class="class-td-head"><div>星期五</div></td>
									<td class="class-td-head"><div>星期六</div></td>
									<td class="class-td-head"><div>星期日</div></td>
								</tr>
								<tr>
									<td class="no-left-border" data="1"></td>
									<td data="2"></td>
									<td data="3"></td>
									<td data="4"></td>
									<td data="5"></td>
									<td data="6"></td>
									<td data="7"></td>
								</tr>
								<tr>
									<td class="no-left-border"><button data="1" type="button" class="btn btn-default schedule-add">添加</button></td>
									<td><button data="2"  type="button" class="btn btn-default schedule-add">添加</button></td>
									<td><button data="3"  type="button" class="btn btn-default schedule-add">添加</button></td>
									<td><button data="4"  type="button" class="btn btn-default schedule-add">添加</button></td>
									<td><button data="5"  type="button" class="btn btn-default schedule-add">添加</button></td>
									<td><button data="6"  type="button" class="btn btn-default schedule-add">添加</button></td>
									<td><button data="7"  type="button" class="btn btn-default schedule-add">添加</button></td>
								</tr>
							</table>
							
							<div style="margin-top:10px;width:100%;">
								<table class="table class-table-add">
									<tr>
										<td width="15%" class="no-left-border class-td-head">课程起始时间</td>
										<td width="15%" class="class-td-head">课程结束时间</td>
										<td width="14%" class="class-td-head">课程</td>
										<td width="14%" class="class-td-head">老师</td>
										<td width="14%" class="class-td-head">助教</td>
										<td width="14%" class="class-td-head">场地</td>
										<td width="14%" class="class-td-head">席位</td>
									</tr>
									<tr>
										<td>
											<div class='col-sm-12'>
											<div class="form-group">
								                <div class='input-group date' id='cheduleStartDatetime' data-date-format="HH:mm">
								                    <input name="cheduleStartDatetime" type='text' class="form-control" />
								                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
								                    </span>
								                </div>
								            </div>
								            </div>
										</td>
										<td>
											<div class='col-sm-12'>
											<div class="form-group">
								                <div class='input-group date' id='cheduleEndDatetime' data-date-format="HH:mm">
								                    <input name="cheduleEndDatetime" type='text' class="form-control" />
								                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
								                    </span>
								                </div>
								            </div>
								            </div>
										</td>
										<td><input class="form-control" id="scheduleName" name="scheduleName"/></td>
										<td>
											<select data-live-search="true" class="selectpicker show-tick" data-width="100%" name="cheduleCoach">
												<option value=""> </option>
												<!-- #for(Coach coach : coachList) -->
													<option value="${coach.coachId}">${coach.name}</option>
												<!-- #end -->
											</select>
										</td>
										<td>
											<select data-live-search="true" class="selectpicker show-tick" data-width="100%" name="cheduleCoachHelp">
												<option value=""> </option>
												<!-- #for(Coach coach : helpCoachList) -->
													<option value="${coach.coachId}">${coach.name}</option>
												<!-- #end -->
											</select>
										</td>
										<td>
											<select data-live-search="true" class="selectpicker show-tick" data-width="100%" name="chedulePlacement">
												<option value=""> </option>
												<!-- #for(Place place : placeList) -->
													<option value="${place.id}">${place.name}</option>
												<!-- #end -->
											</select>
										</td>
										<td><input class="form-control" id="seatNo" name="seatNumber"/></td>
									</tr>
								</table>
							</div>
							
						</div>
						
						<div class="col-sm-offset-2" style="margin: 0px 121px 0 0; float: right;">
							<button id="addButton" type="button" class="btn btn-default btn-ade-default">保存</button>
							<button id="scheduleReset" type="button" class="btn btn-default btn-ade-default" style="margin-right: 20px;">课表重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>